<template>
	<view>
		<view class='coupon-list-window' :class='coupon.coupon==true?"on":""'>
		   <view class='title'>部门<text class="close-icon" @click='close'></text></view>
		   <view class='coupon-list' v-if="coupon.list.length">
		      <view class='item acea-row row-center-wrapper' v-for="(item,index) in coupon.list"  :key='index'>
		       <view class='text'>
					 <view class='row-between-wrapper'>
					    <view class="row-title" @click="getCouponUser(item)">{{item.name}}</view>
					</view>
		            <view class='row-between-wrapper' v-for=" value in item.children" >
		               <view class="row-titles"@click="getCouponUser(value)">{{value.name}}</view>
					   <view class="row-between-wrapper" v-for="i in value.children" @click="getCouponUser(i)">
					     <view class="row-titless">{{i.name}}</view>
					   </view>
		            </view>
		        </view>
		      </view>
		   </view>
		</view>
		<!--
		<view class='mask' catchtouchmove="true" :hidden='coupon.coupon==false' @click='close'></view>-->
	</view>
</template>

<script>
	
	export default {
		props: {
			//打开状态 0=领取优惠券,1=使用优惠券
			 openType : {
			      type: Number,
			      default: 0,
			    },
			    coupon: {
					type: Object,
					default: function(){
						return {};
					}
			    }
		},
		data() {
			return {
	
			};
		},
		
		methods: {
			 close: function () {
			      this.$emit('ChangCouponsClone');
			    },
			    getCouponUser:function(i){
			      let that = this;
			      let list = that.coupon.list;
			      that.$emit('ChangCoupons',i);
			   }
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		  position: fixed;
		  z-index: 1000;
		  top: 0;
		  right: 0;
		  left: 0;
		  bottom: 0;
		  background: rgba(0, 0, 0, 0.6);
		  visibility: hidden;
		  opacity: 0;
		  transition: all 0.3s ease;
	}
	.coupon-list-window{position:fixed;bottom:0;left:0;width:100%;background-color:#f5f5f5;border-radius:16rpx 16rpx 0 0;z-index:555;transform:translate3d(0,100%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);}
	.coupon-list-window.on{transform:translate3d(0,0,0);}
	.coupon-list-window .close-icon{
		position: absolute;
		top: 18rpx;
		right: 18rpx;
		width: 44rpx;
		height: 44rpx;
		background: url(../../static/images/close.png) no-repeat center;
	    background-size: 100%;
		display: inline-block;
		 
	}
	.coupon-list-window .row-between-wrapper{
		width: 100%;
		line-height: 58rpx;
	}
	.coupon-list-window .row-title{
		padding-left: 30rpx;
		font-size:36rpx;
	}
	.coupon-list-window .row-titles{
		padding-left: 48rpx;
		font-size:32rpx;
	}
	.coupon-list-window .row-titless{
		padding-left: 68rpx;
		font-size:28rpx;
	}
	.coupon-list-window .title{height:124rpx;width:100%;text-align:center;line-height:124rpx;font-size:32rpx;font-weight:bold;position:relative;}
	.coupon-list-window .title .iconfont{position:absolute;right:30rpx;top:50%;transform:translateY(-50%);font-size:35rpx;color:#8a8a8a;font-weight:normal;}
	.coupon-list-window .coupon-list{margin:0 0 50rpx 0;height:550rpx;overflow:auto;}
	.coupon-list-window .pictrue{width:414rpx;height:336rpx;margin:0 auto 50rpx auto;}
	.coupon-list-window .pictrue image{width:100%;height:100%;}
	.pic-num{color: #fff;font-size: 24rpx;}
	.line-title{
	  width:90rpx;
	  padding: 0 10rpx;
	  box-sizing: border-box;
	  background:rgba(255,247,247,1);
	  border:1px solid rgba(232,51,35,1);
	  opacity:1;
	  border-radius:20rpx;
	  font-size:20rpx;
	  color: #E83323;
	  margin-right: 12rpx;
	}
	.line-title.gray{
	  border-color:#BBB;
	  color:#bbb;
	  background-color:#F5F5F5;
	}
</style>
